
import {useState,useRef} from 'react'


/**
 * 兄弟传递:
 *    使用状态提升实现兄弟组件通信,
 *    状态提升：通过父组件进行兄弟组件事件的数据传递
 */

function A(props){
  const [value,setValue] = useState('')
  const change =(e)=>{
    setValue(e.target.value)
  }
  return(
    <div>
       this is A compnent
       <input type='text' value={value} onChange={change} />
       <button onClick={()=>{props.onGetAname(value)}}>sendAname</button>
    </div>
  )
}

function B(props){
  return(
    <div>
      this is B compnent {props.name}
    </div>
  )
}



/**
 * 核心流程：
 *  1.通过子传父，将数据传给父组件
 *  2.通过父传子，将数据传给兄弟组件
 * 
 */



function App() {
  const [Aname,setAname] = useState('')
  function getAname(Anamep){
    console.log(Aname)
    setAname(Anamep)
  }
  return (
    <div className="App">
     <A onGetAname={getAname}/>
     <B name={Aname}/>
    </div>
  )
}

export default App;
